import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
import Jour from "./Jour.js"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			username:"",
			avatar:"",
			offindexAjax:true,
			showOffSign:false,
			sign:"",
			skip:0,
			offLogin:false,
			jour:[
				/*模仿的一条说说数据（数据库里的）
					{
					  "jourUserName" : "代斌",
					  "jourAvatar" : "代斌.jpg",
					  "date" : "2018-1-1",
					  "content" : "世界真的好漂亮啊！",
					  "laud" : ["冷轩楼阁、", "刷刷、", "李江、", "3"],
					  "comment" : [{
					      "commentUserName" : "李江",
					      "commentContent" : "确实是这样，世界真的很美好！",
					      "answer" : [{
					          "anserUserName" : "代斌",
					          "anserContent" : "嗯嗯，我也觉得"
					        }]
					    }, {
					      "commentUserName" : "李江",
					      "commentContent" : "确家好水电费快捷键！",
					      "answer" : [{
					          "anserUserName" : "小伙子",
					          "anserContent" : "嗯解决"
					        }]
					    }, {
					      "commentUserName" : "dai",
					      "commentContent" : "aaaaaaaAA啊啊啊啊啊"
					    }]
					}
				*/ 
			]
		}
	}

	// test(){
	// 	this.setState(()=>{
	// 		return ({
	// 			a:[1,21,12121,1211,21,4564,4564,545,56,54,64,5,54,654,4,651,21,12121,1211,21,4564,4564,545,56,54,64,5,54,654,4,65]
	// 		})
	// 	})
	// }

	//得到后台session来判断登录与否和拿到第一批说说数据
	componentWillMount(){
		this.getjour()		
	}

	//得到说说数据
	getjour(){
		if(!this.state.offindexAjax){
			return ;
		}
		let This=this
		let skip=this.state.skip
		$.post("/indexajax",{
			skip:skip+1
		},function(data){
				if(data==="-1"){
					This.setState({
						offLogin:true
					})
					return ;
				}
				else{
					let data1=JSON.parse(data)
					let oldJour=This.state.jour.concat()
					if(data1.jour.length<7){
						This.setState({
							offindexAjax:false
						})
						$(".content").off("scroll")
					}
					for(let i in data1.jour){
						oldJour.push(data1.jour[i])
					}
					data1.jour=oldJour
					This.setState((prevstate)=>{
						return data1
					})
					return ;
				}
		})
		this.setState({
			skip:skip+1
		})
	}

	//排版圆圈和窗口自适应
	componentDidMount(){
		var aspan=$(".emblem").find("span")
		var This=this
		for(var i=0;i<aspan.length;i++){
			$(aspan[i]).css("transform","rotateZ("+i*20+"deg)")
		}
		//初始化content高度
		contentHeight(this)

		//让content的高度自适应
		window.onresize=function(){
			contentHeight(This)
		}


		function contentHeight(This){
			var height=$(window).height()
			var width=$(window).width()
			$(".animation").css({
				//50是导航条的值（body的padding值）
				"top":(height-50-400)/2+"px",
				"left":(width-400)/2+"px"
			})
			$(".content").css({
				"width":width+"px",
				"height":height-50+"px",
			})
		}

		//添加滚轮和滚动条事件，以便获取jour数据
		$(".content").on("scroll",getnewJour1)
		function getnewJour1(){
			let scrollTop=$(".content").scrollTop()
			let height=$(".content-left-jour").height()-$(window).height()
			if(scrollTop>=height){
				This.getjour()
			}
		}

		document.addEventListener("mousewheel",getnewJour2)
		document.addEventListener("DOMMouseScroll",getnewJour2)
		function getnewJour2(ev){
			let scrollTop=$(".content").scrollTop()
			let height=$(".content-left-jour").height()-$(window).height()
			if(scrollTop>=height){
				This.getjour()
			}
		}
	}

	//给圆圈中的登录的鼠标进入动画
	animation(ev){
		var el=ev.target
		$(el).addClass("bounceIn")
		setTimeout(function(){
			$(el).on("mouseleave",function(){
				$(this).removeClass("bounceIn")
			})
		},200)
		
	}

	//点击圆圈动画中的登录跳转路由
	submit(){
		window.location="/login"
	}

	//显示全部的sign
	showSignAll(e){
		let el=$(this.signAllEl)
		let left=e.clientX
		let top=e.clientY
		el.css({
			left:left,
			top:top
		})
		el.fadeIn(300)
	}

	//隐藏全部的sign
	hideSignAll(){
		$(this.signAllEl).fadeOut(300)
	}

	//点击显示修改签名框动画
	setSign(){
		if(!this.state.showOffSign){
			$(this.hr).fadeIn(300)
			$(this.offsign).slideDown(300)
		}else{
			$(this.hr).fadeOut(400)
			$(this.offsign).slideUp(300)
		}
		this.setState({
			showOffSign:!this.state.showOffSign
		})
	}

	//提交修改签名的ajax
	submitSign(){
		let This=this
		let textarea=$(this.textarea)
		let val=textarea.val()
		if(val.trim().length===0)
			return;
		let oldVal=this.state.sign
		textarea.val(" ")
		this.setSign()
		this.setState({
			sign:val
		})
		$.post("/setSignAjax",{
			val:val
		},function(data){
			if(data==="-1"){
				alert("修改签名失败")
				This.setState({
					sign:oldVal
				})
			}
		})
	}
	render(){
		return (
			<div className="container-fluid container-full-screen">
				<nav className="navbar navbar-inverse navbar-fixed-top">
					<div className="navbar-header">
						<button className="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
							<span className="icon-bar"></span>
							<span className="icon-bar"></span>
							<span className="icon-bar"></span>
						</button>
						<a href="/" className="navbar-brand font-relief">全部说说</a>
					</div>
					<div className="collapse navbar-collapse navbar-responsive-collapse">
						<ul className="nav navbar-nav">
							<li><a href="/myshuoshuo" className="font-relief">我的说说</a></li>
							<li><a href="/memberslist" className="font-relief">成员列表</a></li>
						</ul>
						<ul className="nav navbar-nav navbar-right">
							<li className={this.state.username?"hide-user":"show-user"}><a href="/enroll" className="font-relief">注册</a></li>
							<li className={this.state.username?"hide-user":"show-user"}><a href="/login" className="font-relief">登录</a></li>
							<li className={this.state.username?"show-user":"hide-user"}><a href="/myhourse" className="font-relief avatar-size"><img className="avatar" src={"/img/"+this.state.avatar} width="30px" height="30px" alt="头像"/></a></li>
							<li className={this.state.username?"show-user":"hide-user"}><a href="/" className="font-relief">{this.state.username}&#160;&#160;&#160;欢迎回来 </a></li>
							<li><a href="/"></a></li>
						</ul>
					</div>
				</nav>

				<div className="fixedbg"></div>

				<span ref={(signAllEl)=>this.signAllEl=signAllEl} className="sign-all-el">
					{this.state.sign}
				</span>

				<div 
					className="content"
				>
					
					<div className="animation" style={{display:this.state.username||!this.state.offLogin?"none":""}}>
						<div className="emblem ">
						   <span >花</span>
						   <span >径</span>
						   <span >不</span>
						   <span >曾</span>
						   <span >缘</span>
						   <span >客</span>
						   <span >扫</span>
						   <span ></span>
						   <span ></span>
						   <span >蓬</span>
						   <span >门</span>
						   <span >今</span>
						   <span >始</span>
						   <span >为</span>
						   <span >君</span>
						   <span >开</span>
						   <span ></span>
						   <span ></span>
				  		</div>
				  		<div 
				  			className="animated btn-center" 
				  			onMouseEnter={this.animation.bind(this)}
				  			onClick={this.submit.bind(this)}
				  		>
				  			登录
				  		</div>
					</div>
					<div className="row" style={{display:!this.state.username?"none":""}}>
						
							<div className="col-lg-4 content-left col-lg-push-1 col-md-5 col-sm-4 col-xs-4">
								<img className="img-thumbnail img-responsive" src={"/img/"+this.state.avatar} alt="大头像"/>
								<div className="content-left-username content-left-relief" >{this.state.username}</div>
								<div className="content-left-relief content-left-sign">
									{this.state.sign.slice(0,36)}
									<span 
										style={{display:this.state.sign.length>36?" ":"none"}}
										onMouseEnter={(e)=>this.showSignAll(e)}
										onMouseLeave={(e)=>this.hideSignAll(e)}
									>
										...
									</span>
									&nbsp;&nbsp;&nbsp;
									<span 
										style={{cursor:"pointer",fontSize:"16px"}}
										onClick={(e)=>this.setSign(e)}
									>
											修改
									</span>
								</div>
								<hr ref={(hr)=>this.hr=hr} style={{display:"none"}}/>
								<div ref={(offsign)=>this.offsign=offsign} style={{width:"100%",height:"180px",display:"none"}}>
									<div id="placeholderarea">
										<textarea ref={(textarea)=>this.textarea=textarea} rows="5"  className="form-input form-control" placeholder="输入小伙伴username"></textarea>
									</div>
									<div className="full-left set-sign set-sign-parent" onClick={(e)=>this.submitSign(e)} >
										提交
									</div>
								</div>
							</div>
							<div className="content-left-jour col-lg-5 col-lg-push-5 col-md-6 col-md-push-5 col-sm-7 col-sm-push-4 col-xs-8 col-xs-push-4">
								{this.state.jour.map((val,index)=>{
									return <Jour username={this.state.username} jour={val} key={index}/>
								})}
							</div>
					</div>
				</div>
			</div>
		)
			
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));





